<template>
	<view class="container" v-if="show">
		<view class="swiper-boxs">
			<swiper class="swiper" :indicator-dots="swiperConfig.indicatorDots" :autoplay="swiperConfig.autoplay"
				swiperConfig :interval="swiperConfig.interval" :duration="swiperConfig.duration"
				:circular="swiperConfig.circular" :previous-margin="swiperConfig.previousMargin"
				:next-margin="swiperConfig.nextMargin" :current="curIndex">
				<swiper-item v-for="(item ,key) in ingList" :key="key">
					<view class="swiper-item uni-bg-red">
						<image class="logo" :src="item.url" />
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="service-boxs card-box mg-t-20">
			<image class="" :src="imageTip" />
		</view>
		<view class="shop-boxs card-box mg-t-20">
			<view class="item" v-for="(item,key) in dataList" :key="key" @click.native="onDetail(item)">
				<image class="img" :src="item.url" />
				<view class="info-box">
					<view class="name one-ellipsis">{{item.name}}</view>
					<view class="unit one-ellipsis">{{item.standard}}</view>
					<view class="btn">查看详情</view>
					<view class="moneys display-flex ">
						<view class="now">
							￥<text class="num">{{item.discord}}</text>
						</view>
						<view class="old">
							原价￥<text class="num">{{item.amount}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		watch,
		onMounted
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import utils from '/common/util.js'
	import AesTool from '/common/aes_util.js'
	import dayjs from 'dayjs';
	const swiperConfig = {
		indicatorDots: false,
		autoplay: true,
		interval: 3000,
		duration: 300,
		circular: true,
		previousMargin: '0', // 两侧显示swiper宽度+二分之一两个swiper间隔宽度
		nextMargin: '0',
		circular: true,
		imageTip: '',
	}
	const dataList = ref([])
	const ingList = ref([])
	const show = ref(false)
	const imageTip = ref('')
	const curIndex = ref(0)
	const userInfo = ref(getApp().globalData.userInfo)
	const getImg = () => {
		getApp().globalData.serviceApi({}, 'getImg', 'POST').then(res => {
			console.log('getImg 响应结果', res)
			ingList.value = res.data.home_carousel
			imageTip.value = res.data.home_middle && res.data.home_middle.length > 0 ? res.data.home_middle[0]
				.url : ''
		}).catch(error => {
			console.log('getImg 响应异常', error)
			ingList.value = []
			imageTip.value = ''
		})
	}
	const getImgTest = () => {
		ingList.value = [{
			"type": '', // 图片类型 联调时再具体定义吧
			"url": '/static/1001.png', //图片地址
			"sort": 1 // 排序
		}, {
			"type": '', // 图片类型 联调时再具体定义吧
			"url": '/static/logo.png', //图片地址
			"sort": 1 // 排序
		}]
		imageTip.value = ''
		show.value = true
	}
	const getData = () => {
		getApp().globalData.serviceApi('', 'getSaleInfo', 'POST').then(res => {
			console.log('getSaleInfo 响应结果', res)
			dataList.value = res.data
		}).catch(error => {
			console.log('getSaleInfo 响应异常', error)
			dataList.value = []
		})
		show.value = true
	}
	const getDataTest = () => {
		dataList.value = [{
			name: '巴士鲜奶',
			tip: '巴士鲜奶巴士鲜奶巴士鲜奶巴士鲜奶巴士鲜奶巴士鲜奶巴士鲜奶巴士鲜奶巴士鲜奶',
			url: '/static/001.png',
			standard: '500ml*10瓶',
			discord: 100,
			amount: 120
		}, {
			name: '巴士鲜奶2',
			tip: '',
			url: '/static/003.png',
			standard: '500ml*10瓶',
			discord: 100,
			amount: 120
		}, {
			name: '巴士鲜奶3',
			tip: '',
			url: '/static/003.png',
			standard: '500ml*10瓶',
			discord: 100,
			amount: 120
		}]
		show.value = true
	}
	const onBuy = (item) => {
		if (!userInfo.value.addressCode || !userInfo.value.phone) {
			uni.showModal({
				title: '您的用户信息还未完善，请先完善您的信息',
				content: '',
				confirmText: '去完善',
				success: function(res) {
					if (res.confirm) {
						console.log('用户点击确定');
						uni.navigateTo({
							url: '/pages_other/setting'
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
			return
		}
		uni.showModal({
			title: '确认购买吗?',
			content: '',
			success: function(res) {
				if (res.confirm) {
					console.log('用户点击确定');
					submit(item)
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}
	const onDetail = (item) => {
		uni.navigateTo({
			url: '/pages_other/shop-detail?id=' + item.id
		})
	}
	const submit = (item) => {
		uni.showLoading({
			title: '下单中...',
			mask: true
		})
		// 登录
		getApp().globalData.serviceApi({
			saleId: item.id,
		}, "pay", 'POST').then(res => {
			uni.hideLoading()
			if (res.code !== 0) {
				uni.showToast({
					title: res.message ? res.message : '下单失败，请稍后重试',
					icon: 'none'
				})
				return
			}

			uni.requestPayment({
				timeStamp: res.data.timeStamp,
				nonceStr: res.data.nonceStr,
				package: res.data.packageVal,
				signType: res.data.signType,
				paySign: res.data.paySign,
				success(payRes) {
					//充值成功
					console.log('wxpayResult:', payRes);
					uni.showToast({
						title: '支付成功',
						icon: 'success'
					});
					// 返回上一页
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages_other/my-card'
						})
					}, 500);
				},
				fail(payErr) {
					uni.showToast({
						title: '充值失败',
						icon: 'error'
					});
					console.log('wxPayFailed', payErr);
				}
			});
		}).catch(error => {
			uni.hideLoading()
			uni.showToast({
				title: error.message ? error.message : '下单失败，请稍后重试',
				icon: 'none'
			})
		})
		// })
	}
	onShow(() => {
		console.log('******onMounted', getApp().globalData.userInfo)
		console.log('组件已经挂载11')
		userInfo.value = getApp().globalData.userInfo
	})
	onMounted(() => {
		getImg('home')
		// getImg('home1')
		getData()
		// getImgTest()
		// getDataTest()
	})
</script>

<style lang="less" scoped>
	@import url("../../common/common.css");

	.container {
		width: 100%;
		padding: 10rpx 10rpx 0;

		.swiper-boxs {
			width: 100%;
			height: 1147rpx;

			.swiper {
				height: 100%;
			}

			.swiper-item {
				width: 100%;
				height: 1147rpx;
				border-radius: 18rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: inherit;
				}
			}
		}

		.card-box {
			background-color: aliceblue;
			border-radius: 12rpx;
			padding: 30rpx 0 26rpx;
			overflow: hidden;
		}

		.menu-boxs {
			.item {
				width: 25%;
				text-align: center;
				font-size: 26rpx;

				image {
					width: 90rpx;
					height: 90rpx;
				}

				.name {
					padding-top: 8rpx;
				}
			}
		}

		.seckill-boxs {
			padding-left: 20rpx;
			padding-right: 20rpx;

			.title-box {
				font-size: 34rpx;
				font-weight: bold;
				padding-bottom: 20rpx;

				.name {
					font-style: italic;
				}

				.times-box {
					font-size: 24rpx;
					font-weight: normal;
					justify-content: flex-end;

					.time {
						width: 36rpx;
						font-size: 26rpx;
						text-align: center;
						padding: 2rpx 0;
						background-color: #333;
						color: #fff;
						margin: 0 3rpx;
					}
				}

				.active {
					color: red;
				}
			}

			.list-item {
				justify-content: flex-start;
				border-radius: 12rpx;
				background-color: #fff;
				margin-bottom: 20rpx;
				padding: 15rpx;
				font-size: 24rpx;

				.img {
					width: 200rpx;
					height: 287rpx;
				}

				.info-box {
					width: calc(100% - 200rpx);
					padding-left: 20rpx;

					.name {
						font-size: 30rpx;
						font-weight: bold;
					}

					.tip {
						font-size: 24rpx;
						color: #666;
						padding: 10rpx 0 10rpx;
					}

					.unit {
						font-size: 24rpx;
						padding-bottom: 16rpx;
						// color: #666;
						// padding: 10rpx 0 26rpx;
					}

					.moneys {
						justify-content: flex-start;

						.now {
							color: red;

							.num {
								font-size: 30rpx;
								font-weight: bold;
							}
						}

						.old {
							color: #999;
							padding-left: 20rpx;

							.num {
								text-decoration: line-through;
							}
						}
					}

					.btns {
						padding-top: 16rpx;

						.btn {
							width: calc(100% - 140rpx);
							height: 46rpx;
							line-height: 46rpx;
							background-color: #087bd6;
							color: #fff;
							text-align: center;
							border-radius: 60rpx;
						}

						.num {
							text-decoration: underline;
						}
					}
				}

				&:last-child {
					margin-bottom: 0;
				}
			}
		}

		.service-boxs {
			padding: 0;
			height: 507rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.shop-boxs {
			display: flex;
			flex-wrap: wrap;
			padding-left: 20rpx;
			padding-right: 20rpx;

			.item {
				width: calc((100% - 20rpx) /2);
				border-radius: 12rpx;
				background-color: #fff;
				margin-bottom: 20rpx;
				font-size: 24rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				overflow: hidden;

				&:nth-child(2n) {
					margin-right: 0;
				}

				.img {
					width: 100%;
					height: 227rpx;
				}

				.info-box {
					width: 100%;
					padding: 10rpx 20rpx 14rpx;

					.name {
						width: calc(100% - 140rpx);
						font-size: 26rpx;
						font-weight: bold;
					}

					.unit {
						font-size: 24rpx;
					}

					.btn {
						width: 100%;
						height: 56rpx;
						line-height: 56rpx;
						background-color: #087bd6;
						color: #fff;
						text-align: center;
						border-radius: 60rpx;
						margin-top: 10rpx;
						font-size: 28rpx;
					}

					.moneys {
						padding-top: 10rpx;
						justify-content: flex-start;

						.now {
							color: red;

							.num {
								font-size: 26rpx;
								font-weight: bold;
							}
						}

						.old {
							color: #999;
							padding-left: 10rpx;

							.num {
								text-decoration: line-through;
							}
						}
					}



					// .num {
					// 	text-decoration: underline;
					// }
				}
			}
		}
	}
</style>